<template>
  <div class="box">
    <!-- 头部 -->
    <div class="box_header">
      <span class="title">{{$t("message.calculator")}}</span>
    </div>
    <!-- 内容 -->
    <div class="box_body">
      <!-- 左侧盒子 -->
      <div class="box_body_left">
        <p class="coin" >{{$t("message.coins")}}</p>
        <template>
          <!-- 币种的绑定值 -->
          <el-select v-model="coinValue"   ref="coinChange">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
        </el-select>
      </template>
        <p class="rate">{{$t("message.importShare")}}</p>
        <!-- 算力的绑定 -->
        <el-input placeholder="请输入内容" v-model="input" clearable @input="bb"></el-input>
        <span class="ths">TH/S</span>
        <img src="../../assets/arrow.png" class="arrow">
      </div>
      <!-- 右侧盒子 -->
      <div class="box_body_right">
        <ul>
          <li>
            <p class="day">{{$t("message.dailyEarnings")}} :</p>
            <input type="text" v-model="earn" class="btcInput" @input="aa" >
            <span class="btc" ref="day" >BTC</span>
            <p class="money" v-if="flag==1">{{$t("message.convertInto")}}≈￥{{money}}</p>
             <p class="money"  v-else>{{$t("message.convertInto")}}≈${{money}}</p>
          </li>
          <li>
            <p >{{$t("message.pricingManner")}}</p>
           <template>
            <el-select v-model="way" >
              <el-option
              v-for="item in PriceWay"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
            </el-select>
          </template>
          </li>
            <li>
            <p>{{$t("message.referencePrice")}}</p>
             <!-- 通过计价方式改变来改变价格和单位，价格通过price，单位通过flag -->
            <input type="text" v-model="price" class="refer">
             <span class="referBtc" ref='btc'>￥/BTC</span>
          </li>
          <li>
            <p>{{$t("message.difficulty")}}</p>
            <input type="text" v-model="difficult" @input='cc'>
          </li>
        </ul>
      </div>
      <!-- 底部文字盒子 -->
      <div class="footerBox" v-if="flag1">
        <span class="imgBox">
          <img src="../../assets/i.png" alt="">
        </span>
          <span class="introduce">{{$t("message.note")}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import {getBlockDiff} from '@/api'
import {getBlockChainInfo} from '@/api'
export default {
  data() {
    return {
       //屏幕宽度
       screenWidth: document.body.clientWidth,
       //底部文字标识
       flag1:true,
      //参考价格单位的标志符号
      flag:1,
      //参考价格
      price:'35605.8626',
      //日收益
      earn: "0.00003958",
      //难度
      difficult: "6353030562984",
      //算力输入
      input: 1,
      //币种选择
      coinValue: "BTC",
      options: [
        {
          value: "选项1",
          label: "BTC"
        },
        {
          value: "选项2",
          label: "BCH"
        },
        {
          value: "选项3",
          label: "BSV"
        }
      ],
      //计价方式
      way: "CNY-￥",
      PriceWay: [
        {
          value: "选项1",
          label: "CNY-￥"
        },
        {
          value: "选项2",
          label: "USD-$"
        }
      ]
    };
  },
  created(){
    getBlockDiff().then(res=>{
      if(res.data.msg=='ok'){
       console.log(res.data.data[0].difficulty,1122);
       //默认等于最新的难度值
       this.difficult=res.data.data[0].difficulty
      }
    }),
    //参考价格
    getBlockChainInfo().then(res=>{
      console.log(res,3344);
      if(res.data.msg='ok'){
          this.price=(res.data.data.price_usd*6.7284)
      }
    })
    //进入页面先判断宽度
    if(this.screenWidth<996){
      this.flag1=false
    }else{
       this.flag1=true
    }
  },
  mounted(){
    //一进页面先判断屏幕大小，动态修改选择器里的高度BTC和计价方式在768小屏下不兼容
    //这里只要是小于768都统一这么处理，没必要再监听屏幕变化
         if(this.screenWidth<768){
          document.querySelectorAll('.el-select-dropdown__item').forEach(item=>{
          item.style.height='30px';
          item.style.lineHeight='30px'
        })
      }
     this.aa();
     this.bb();
     this.cc();
     this.input=1
      //监听屏幕宽度
    let that = this;
    window.addEventListener("resize", function() {
      return (() => {
        that.screenWidth = document.body.clientWidth;
      })();
    });
  },
  watch:{
    //监听屏幕宽度改变实现响应式
    screenWidth(val,oldval) {
      this.screenWidth = val;
      if (this.screenWidth < 996 ) {
        this.flag1 = false;
      } else {
        this.flag1 = true;
      }
     
    },
    //计价方式改变，参考价格折合总数，参考价格改变
    'way':function(newVal,oldval){  
      // console.log(newVal,'改变计价');
      if(this.PriceWay[1].value==newVal|| newVal=="USD-$"){
         //计价方式监听单位 //是人民币就换成美元
        if(this.$refs.btc.innerHTML = '￥/BCH' ){
              this.$refs.btc.innerHTML = '$/BCH'
            }else if(this.$refs.btc.innerHTML = '￥/BTC'){
              this.$refs.btc.innerHTML = '$/BTC'
              }else if(this.$refs.btc.innerHTML = '￥/BSV'){
              this.$refs.btc.innerHTML = '$/BSV'
              }
        this.price=this.price/6.7284;
        this.flag=2;
        //newVal=="CNY-￥" 判断进来的时候是人民币
      }else if(this.PriceWay[0].value==newVal || newVal=="CNY-￥"){  
        this.flag=1;
        //计价方式监听单位，是美元就换成人民币 
         if(this.$refs.btc.innerHTML = '$/BCH' ){
              this.$refs.btc.innerHTML = '￥/BCH'
            }else if(this.$refs.btc.innerHTML = '$/BTC'){
              this.$refs.btc.innerHTML = '￥/BTC'
              }else if(this.$refs.btc.innerHTML = '$/BSV'){
              this.$refs.btc.innerHTML = '￥/BSV'
              }
        //暂时写法，确定这个参考价格
        if(this.price!=='35605.8626'&&  this.price!='1711.8633'&&  this.price !='407.0579' ){
          this.price=this.price*6.7284
        }     
      }
    },
    
   //选择币种改变,选择后先显示默认数据
    'coinValue':function(newVal){
      //BTC
        if(this.options[0].value==newVal ){
          //BTC改数据
              this.$refs.day.innerHTML = 'BTC'
              this.difficult='6353030562984'
              this.earn="0.00003958"
              //币种改变后，计价方式监听单位
             if(this.way=='CNY-￥' || this.way=='选项1'){
             this.price ='35605.8626' 
              this.$refs.btc.innerHTML = '￥/BTC'
            }else if(this.way=='USD-$' ||this.way=='选项2'){
             this.price =35605.8626/6.7284
             this.$refs.btc.innerHTML = '$/BTC'
              }
          //BCH
        }else if(this.options[1].value==newVal){
          this.difficult='315171916257.56',
          this.earn="0.00079784"
          this.$refs.day.innerHTML = 'BCH'  
          if(this.way=='CNY-￥' || this.way=='选项1' ){
             this.price ='1711.8633' 
              this.$refs.btc.innerHTML = '￥/BCH'
            }else if(this.way=='USD-$' ||this.way=='选项2'){
             this.price =1711.8633/6.7284
              this.$refs.btc.innerHTML = '$/BCH'
              }
          //BSV
        }else if(this.options[2].value==newVal){
              this.difficult='84215041082.60',
              this.earn="0.00298589"
             this.$refs.day.innerHTML = 'BSV'      
           if(this.way=='CNY-￥' ||this.way=='选项1'){
             this.price ='361.2504' 
              this.$refs.btc.innerHTML = '￥/BSV'
            }else if(this.way=='USD-$'||this.way=='选项2'){
             this.price =361.2504/6.7284
              this.$refs.btc.innerHTML = '$/BSV'
             }     
          }
        }
  },
methods:{
  //知道收益求算力
  aa(){
    let that =this;
    if(that.earn&&that.earn!=0){ 
      //知道收益求算力： 收益*难度*2^32/10^12*86400*12.5
       that.input= parseFloat(that.earn*this.difficult*Math.pow(2,32)/(Math.pow(10,12)*86400*12.5)).toFixed(8) 
    }else{
      that.input=0
    }
  },
  //知道收益算算力
  bb(){
    if(this.input&&this.input!=0){ 
      //知道算力求收益： 算力*10^12*86400*12.5/2^32*难度
       this.earn= parseFloat(this.input*(Math.pow(10,12)*86400*12.5/Math.pow(2,32)/this.difficult)).toFixed(8) 
    }else{
      this.earn=0
    }
  },
  
  cc(){
    //难度修改，动态修改收益,
    if(this.difficult&&this.difficult!=0){ 
      //知道难度和算力求收益： 算力*10^12*86400*12.5/2^32*难度
       this.earn= parseFloat(this.input*(Math.pow(10,12)*86400*12.5/Math.pow(2,32)/this.difficult)).toFixed(8) 
    }else{
      this.earn=0
    }
  }
},
  computed: {
    //动态计算折合的钱数
    money(){
      return (parseFloat(this.price)*parseFloat(this.earn)).toFixed(2)
    }
  },
};
</script>
<style lang="less" scoped>

//768屏幕以上
@media screen and (min-width:768px){
  .box {
    width: 1266px;
    height: 798px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    margin: 0 auto;
    border-radius: 20px;
    .box_header {
      width: 100%;
      height: 68px;
      background-color: #1466bf;
      border-top-left-radius: 20px; //左上角
      border-top-right-radius: 20px; //右上角
      .title {
        font-size: 24px;
        color: #fff;
        float: left;
        margin: 22px 0 22px 32px;
      }
    }
    .box_body {
      text-align: left;
      position: relative;
      .box_body_left {
        position: absolute;
        top: 0;
        left: 0;
        //选择币种
        .coin {
          font-size: 26px;
          font-weight: 100;
          margin-left: 79px;
          margin-top: 44px;
          margin-bottom:13px;
        }
        //币种选择框
        .el-select {
          margin-left: 79px;
          background-color: #1466bf;
          width: 94px;
          height: 47px;
          border-radius: 4px;
          /deep/input.el-input__inner {
            font-size: 16px;
            background-color: #1466bf;
            height: 47px;
            line-height: 47px;
            color: #fff;
          }
          //选择框颜色没实现
          /deep/div.el-select-dropdown {
            background-color: #1466bf;
          }
        }
        span.ths {
          position: absolute;
          display: inline-block;
          text-align: center;
          height: 58px;
          width: 90px;
          line-height: 55px;
          border: 1px solid #1466bf;/*no*/
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
          font-size: 20px;
          font-weight: 300;
        }
        //输入算力
        .rate {
          font-size: 27px;
          font-weight: 100;
          margin-top: 140px;
          margin-left: 123px;
          margin-bottom: 13px;
        }
        .arrow {
          position: absolute;
          width: 91px;
          height: 67px;
          left: 585px;
        }

        //使表格删除键在框内
        .el-input {
          margin-left: 123px;
          width: 250px;
          height: 58px;
          border: none;
          border: 1px solid #1466bf;/*no*/
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          border-right: none;
          font-size: 18px;
          /deep/input.el-input__inner {
            height: 58px;
            line-height: 58px;
            border-right: none;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
           
          }
        }
      }
      .box_body_right {
        float: right;
        margin-right: 182px;
        ul {
          li {
            list-style: none;
            &:nth-child(1) {
              //日收益
              .day {
                margin-top: 80px;
                font-size: 23px;
                margin-bottom: 12px;

              }
              //出币数量
              .btcInput {
                width: 198px;
                height: 51px;
                border: none;
                border: 1px solid #1466bf;/*no*/
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                border-right: none;
                box-sizing: border-box;
                padding-left: 18px;
                font-size: 18px;
                outline: none;
              }
              //BTC框
              .btc {
                 box-sizing: border-box;
                font-size: 18px;
                font-weight: 200;
                position: absolute;
                display: inline-block;
                width:78px;
                height: 51px;
                border: 1px solid #1466bf;/*no*/
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
                line-height: 51px;
                text-align: center;
              }
              .money{
                text-align: right;
                margin: 0;
                font-size: 18px;
                font-weight: 200;
              }
            }
            //计价方式
            &:nth-child(2){
              p{
                font-size: 23px;
                  margin-bottom: 12px;
              }
              .el-select{
                width:281px;
                height: 48px;
                line-height: 48px;
                border: 1px solid #1466bf;/*no*/
                border-radius: 5px;
                outline: none;
                /deep/.el-input__inner{
                  height: 48px;
                  border-radius: 5px;
                  outline: none;
                  font-size: 18px;
                }
              }
              
            }
            //参考价格
              &:nth-child(3){
              p{
                font-size: 23px;
                margin-bottom: 12px;
              } 
              //参考价格
              .refer {
                width: 198px;
                height: 51px;
                border: none;
                border: 1px solid #1466bf;/*no*/
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                border-right: none;
                box-sizing: border-box;
                padding-left: 18px;
                font-size: 18px;
                outline: none;
              }
              //BTC框
              .referBtc {
                 box-sizing: border-box;
                font-size: 18px;
                font-weight: 200;
                position: absolute;
                display: inline-block;
                width:78px;
                height: 51px;
                border: 1px solid #1466bf;/*no*/
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
                line-height: 51px;
                text-align: center;
              }
            }
            //难度
              &:nth-child(4){
              p{
                font-size: 23px;
                margin-bottom: 12px;
              }
              input{
                width:281px;
                height: 51px;
                border: none;
                border: 1px solid #1466bf;/*no*/
                border-radius: 5px;       
                box-sizing: border-box;
                padding-left: 18px;
                outline: none;
                font-size: 18px;
              }
            }
          }
        }
      }
      //<!-- 底部文字盒子 -->
    .footerBox{
      position: absolute;
      top: 625px;
      left: 269px;
      width: 770px;
    
      .imgBox{
        position: absolute;
        left: -18px;
        font-size: 16px;
      }
      .introduce{
          display: inline-block;
        font-size: 14px;
        width: 752px;
      }
    }
    }
    
  }
}
  /*768屏幕以下手机屏样式   */
  @media screen and (max-width: 768px){ 
   
    .box {
        width: 90%;
        border: 1px solid #ccc;/*no*/
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        margin: 0 auto;
        border-radius: 5px;
        .box_header {
          width: 100%;
          height:50px;
          background-color: #1466bf;
          border-top-left-radius: 5px; //左上角
          border-top-right-radius: 5px; //右上角
          .title {
            font-size: 26px;
            color: #fff;
            float: left;
            margin: 10px 0 10px 10px;
          }
        }
        .box_body {
          // overflow: hidden;
          text-align: left;
          // position: relative;
          .box_body_left {
            // position: absolute;
            // top: 0;
            // left: 0;
            //选择币种
            .coin {
              font-size: 10px;
              font-weight: 400;
              margin-left: 80px;
               margin-top: 40px;
              margin-bottom:5px;
            }
            //币种选择框
            .el-select {
              margin-left: 5%;
              background-color: #1466bf;
              width: 40%;
              height:50px;
              border-radius: 5px;
              /deep/input.el-input__inner {
                font-size: 12px;
                background-color: #1466bf;
               height:50px;
                line-height:50px;
                color: #fff;
              }
             
              //选择框颜色没实现
              /deep/div.el-select-dropdown {
                background-color: #1466bf;
              }
               /deep/.el-input__suffix{
                height:50px;
                  right: 50px;
              }
              
            }
            span.ths {
              display: inline-block;
              // box-sizing: border-box;
              text-align: center;
              height:50px;
              width: 20%;
              line-height: 50px;
              border: 1px solid #1466bf;/*no*/
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
              font-size: 2px;
              font-weight: 400;
              // position: absolute;
            }
            //输入算力
            .rate {
              font-size: 16px;
              font-weight: 400;
              margin-top: 40px;
              margin-left: 80px;
              margin-bottom: 6px;
            }
            .arrow {
              width: 0px;  
            }
            //使表格删除键在框内
            .el-input {
              margin-left: 5%;
              width: 60%;
              height: 150px;
              border: none;
              border: 1px solid #1466bf;/*no*/
              border-top-left-radius: 5px;
              border-bottom-left-radius:5px;
              border-right: none;
               outline: none;
               font-size: 14px;
              /deep/input.el-input__inner {
                box-sizing: border-box;
                height: 100%;
                border-right: none;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                 outline: none;
              }
              // /删除键/
              /deep/.el-input__suffix{
                top:70px;
                right: 70px;
              }
            }
          }
          .box_body_right {
            // float: right;
          float: none;
            ul {
              padding: 0;
              li {
                list-style: none;
                &:nth-child(1) {
                  //日收益
                  .day {
                    margin-left: 5%;
                    font-size: 14px;
                     margin-top: 40px;
                    margin-bottom: 4px;
                    
                  }
                  //出币数量
                  .btcInput {
                    margin-left: 5%;
                    width:60%;
                    height: 150px;
                    border: none;
                    border: 1px solid #1466bf;/*no*/
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                    border-right: none;
                    box-sizing: border-box;
                    padding-left: 8px;
                    font-size: 12px;
                    outline: none;
                  }
                  //BTC框
                  .btc {
                    position: absolute;
                    box-sizing: border-box;
                    font-size: 12px;
                    font-weight: 400;
                    display: inline-block;
                    width:20%;
                    height:150px;
                    border: 1px solid #1466bf;/*no*/
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                    line-height:150px;
                    text-align: center;
                  }
                  .money{
                    text-align: right;
                    margin-top:20px;
                    margin-right:13%; 
                    margin-bottom: 20px;
                    font-size: 10px;
                    font-weight: 400;
                  }
                }
                //计价方式
                &:nth-child(2){
                  p{
                      margin-left: 5%;
                      font-size:14px;
                      margin-bottom: 10px;
                      margin-top: 10px;
                  }
                  .el-select{
                     margin-left: 5%;
                    width:82%;
                    height: 150px;
                    line-height: 150px;
                    border: 1px solid #1466bf;/*no*/
                    border-radius: 5px;
                    outline: none;
                    /deep/.el-input__inner{
                      border: 0;
                      width: 100%;
                      height:150px;
                      border-radius: 5px;
                      outline: none;
                      font-size: 14px;
                      font-weight: 400;
                    }
                     // /下拉键/
                 /deep/.el-input__suffix{
                // 
                height: 100px;
                right: 50px;
              }
                  }
                  
                 }
                 //参考价格
                  &:nth-child(3){
                  p{
                      margin-left: 5%;
                      font-size:14px;
                      margin-bottom:10px;
                      margin-top: 40px;
                  } 
                  //参考价格
                  .refer {
                     margin-left: 5%;
                      width:60%;
                     height: 150px;
                    border: none;
                    border: 1px solid #1466bf;/*no*/
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                    border-right: none;
                    box-sizing: border-box;
                    padding-left: 20px;
                    font-size: 12px;
                    outline: none;
                  }
                  //BTC框
                  .referBtc {
                    box-sizing: border-box;
                    // font-size: 12px;
                    font-weight: 400;
                    position: absolute;
                    display: inline-block;
                    width:20%;
                    height: 150px;
                    border: 1px solid #1466bf;/*no*/
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                    line-height: 150px;
                    text-align: center;
                  }
                 }
                 //难度
                  &:nth-child(4){
                  p{
                     margin-left: 5%;
                      font-size:14px;
                      margin-bottom: 10px;
                       margin-top: 40px;
                  }
                  input{
                    margin-left: 5%;
                    width:82%;
                    height: 150px;
                    border: none;
                    border: 1px solid #1466bf;/*no*/
                    border-radius: 5px;       
                    box-sizing: border-box;
                    padding-left: 20px;
                    outline: none;
                    font-size: 12px;
                  }
                 }
              }
            }
          }
        
        }
         
      }
  }
 
</style>
